<template>
  <div class="score-case">
    <LjHeader></LjHeader>
    <LjHeader></LjHeader>
    <LjButton></LjButton>
    <LjButton></LjButton>
    <LjButton></LjButton>
    <LjButton></LjButton>
    <LjButton></LjButton>
  </div>
</template>

<script>
import moment from "moment";
import LjHead from "./components/LjHeader.vue"
export default {
  name: "ScoreCase",
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list"))||[],
      subject: "",
      score: ""
      
    };
  },
  computed:{
    total(){
      return this.list.reduce((sum,item)=>sum+item.score,0)
    },
    average(){
      return (this.total/this.list.length).toFixed(2)
    }
  },
  watch:{
    list:{
      deep:true,
      handler(nval){
        localStorage.setItem("list",JSON.stringify(nval))
      }
    }
  },
  methods:{
    add(){
      const id=this.list.length?this.list.slice(-1)[0].id+1:1
      this.list.push({
        id:id,
        subject:this.subject,
        score:this.score,
        date:new Date()
      })
    },
    remove(id){
      const a=this.list.findIndex(item=>item.id===id)
      this.list.splice(a,1)
    },
    mydate(date){
      return moment(date).format("YYYY年MM月DD日HH时mm分ss秒")
    }
  },
  components:{
    LjHeader:LjHead,
  }
};
</script>

<style lang="less">
  div{
    width: 100%;
    height: 200px;
  }
</style>